<!-- 首页，支持店铺装修 -->
<!--<template>-->
<!--  <view v-if="template" class="container">-->
<!--    <view class="container-top-bg">-->

<!--    </view>-->
<!--    <view class="flex " style="z-index: 10">-->
<!--      <s-search-block :data="data"-->
<!--                      :styles="{-->
<!--                          borderRadius: 90-->
<!--                      }" :navbar="false" />-->
<!--      <view class="order" @tap="onShowSelect('order')">-->
<!--        <image-->
<!--          class="icon"-->
<!--          :src="sheep.$url.static('/static/img/shop/chat/order.png')"-->
<!--          mode="aspectFill"-->
<!--        ></image>-->
<!--        <text class="desc">订单</text>-->

<!--      </view>-->
<!--    </view>-->


<!--    <su-tabs :list="tabsList" keyName="title" :scrollable="false"-->
<!--             :activeStyle="{-->
<!--            color: '#fff',-->
<!--            fontWeight: 'bold',-->
<!--            transform: 'scale(1.05)'-->
<!--        }"-->
<!--             :inactiveStyle="{-->
<!--            color: '#fff',-->
<!--            transform: 'scale(1)'-->
<!--        }"-->
<!--             itemStyle="padding: 20rpx; width:20%;" lineColor="#fff">-->
<!--    </su-tabs>-->
<!--    <s-layout title="首页" :navbar="navbar" tabbar="/pages/index/index" :bgStyle="template.page"-->
<!--              :navbarStyle="template.navigationBar" onShareAppMessage>-->
<!--      <s-block v-for="(item, index) in template.components" :key="index" :styles="item.property.style">-->
<!--        <s-block-item :type="item.id" :data="item.property" :styles="item.property.style" />-->
<!--      </s-block>-->
<!--    </s-layout>-->
<!--  </view>-->
<!--</template>-->
<template>

  <!--	      <s-layout title="首页" :navbar="navbar" tabbar="/pages/index/index" :bgStyle="template.page"-->
  <!--	                :navbarStyle="template.navigationBar" onShareAppMessage>-->
  <!--	        <s-block v-for="(item, index) in template.components" :key="index" :styles="item.property.style">-->
  <!--	          <s-block-item :type="item.id" :data="item.property" :styles="item.property.style" />-->
  <!--	        </s-block>    </s-layout>-->
  <view class="container">
    <s-layout
      title="首页" :navbar="navbar" tabbar="/pages/index/index" :bgStyle="template.page"
      :navbarStyle="template.navigationBar" onShareAppMessage>

      <view class="container-first-tab">
        <view class="top">
          <view class="flex search">
            <uni-search-bar
              class="ss-flex-1" :radius="40" placeholder="请输入商品关键词" cancelButton="none"
              @click="sheep.$router.go('/pages/index/searchGood')"
              clearButton="none" />
            <view class="flex-column flex">
              <uni-icons type="person-filled" size="30" color="#fff">客服</uni-icons>
              <text style="color:#fff;">客服</text>
            </view>

          </view>
          <up-line />
          <view class="top-tab-box">

            <up-tabs
              @click="tabChange" :list="tabsList" keyName="title" class="top-tabs" lineWidth="60"
              lineColor="#fff" :activeStyle="{
            color: '#fff',
            fontWeight: 'bold',
            transform: 'scale(1.05)'
        }" :inactiveStyle="{
            color: '#fff',
            transform: 'scale(1)'
        }" itemStyle="padding:15rpx;flex:1; height: 70rpx;" />
          </view>
        </view>
        <up-line />
        <view v-if="state.tabActive === 0" class="banner">
          <up-swiper
            :list="state.list3" indicator indicatorMode="line" circular class="banner-swiper"
            radius="20rpx" height="300rpx" />
        </view>
        <view v-if="state.tabActive === 0" class="middle-box">
          <view style="display: flex;justify-content: space-between;color: #a37f6c">
            <view class="flex" style="font-size: .85rem;">
              <fontIcon modelValue="赔" :styles="{marginRight:'10rpx'}" />
              差必赔
            </view>
            <view class="flex" style="font-size: .85rem;">
              <fontIcon modelValue="退" :styles="{marginRight:'10rpx'}" />
              七天退换
            </view>
            <view class="flex" style="font-size: .85rem;">
              <fontIcon modelValue="邮" :styles="{marginRight:'10rpx'}" />
              全场包邮
            </view>
            <view class="flex" style="font-size: .85rem;">
              <fontIcon modelValue="24" :styles="{marginRight:'10rpx'}" />
              48小时发货
            </view>
          </view>
          <up-grid :border="false" col="4" class="gridMenu">
            <up-grid-item
              v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex"
              @click="sheep.$router.go(baseListItem.path)">
              <up-image
                :src="hotSrcList[baseListIndex]" shape="circle" width="90rpx"
                style="margin-top:20rpx" height="90rpx" />
              <text class="grid-text">{{ baseListItem.title }}</text>
            </up-grid-item>
          </up-grid>
          <up-row customStyle="" class="hotBox">
            <up-col span="6">
              <view class="uno-h-40 flex u-flex-y-center hotBox-top">
                <text class="first" style=" .75rem;">限时秒杀</text>
                <up-count-down
                  :time="30 * 60 * 60 * 1000" format="HH:mm:ss" autoStart millisecond
                  @change="onChange">
                  <view class="time">
                    <view class="time__custom">
                      <text
                        class="time__custom__item">
                        {{ state.timeData.hours > 10 ? state.timeData.hours : '0' + state.timeData.hours }}
                      </text>
                    </view>
                    <text class="time__doc">:</text>
                    <view class="time__custom">
                      <text class="time__custom__item">{{ state.timeData.minutes }}</text>
                    </view>
                    <text class="time__doc">:</text>
                    <view class="time__custom">
                      <text class="time__custom__item">{{ state.timeData.seconds }}</text>
                    </view>
                  </view>
                </up-count-down>
              </view>
              <view class="hotBox-bot" style="font-size: 25rpx">
                大牌商品低至9.9元
              </view>
              <view class="flex imageBox">
                <up-image
                  :show-loading="true"
                  :src="'https://www.zhangfkj.cn/zfkj/14_9aa54042-1989-429b-b046-178b9bf6ccdalimit_1.8098157b.png'"
                  width="80px" height="80px" />
                <up-image
                  :show-loading="true"
                  :src="'https://www.zhangfkj.cn/zfkj/14_b9d7bd18-8452-45d8-9f90-598b952d6459limit_2.480d8055.png'"
                  width="80px" height="80px" />

              </view>
            </up-col>
            <up-col span="6" @click="sheep.$router.go('/pages/index/exchange')">
              <view class="uno-h-40 flex hotBox-top">
                <text class="first">积分中心</text>
                <view class="flex jifenIcon">
                  <up-icon name="integral" color="#fff" size="20" />
                  {{ user.point }}
                </view>
                <!--                <up-tag text="26800" type="warning" plain shape="circle" bgColor="#fc914d" color="#fff"></up-tag>-->
              </view>
              <view class="hotBox-bot" style="font-size: 25rpx">积分当钱花,好礼享不停</view>

              <view class="flex imageBox">
                <up-image
                  :show-loading="true"
                  :src="'https://www.zhangfkj.cn/zfkj/14_1c776edc-a752-439c-960c-161ed3993abdhome_entrance_exchange_1.ccbb6434.png'"
                  width="80px" height="80px" />
                <up-image
                  :show-loading="true"
                  :src="'https://www.zhangfkj.cn/zfkj/14_9aa54042-1989-429b-b046-178b9bf6ccdalimit_1.8098157b.png'"
                  width="80px" height="80px" />
              </view>
            </up-col>
          </up-row>
          <up-grid :border="false" col="4">
            <up-grid-item
              class="bottomHotBox" v-for="(listItem,listIndex) in bottomList" :key="listIndex"
              @click="botHotHandler(listItem,listIndex)">
              <up-text
                align="center" :type="state.bottomListActive === listIndex?'error':'' "
                class="title" size="30rpx" :text="listItem.title" />
              <up-text
                :class="{
                subTitle:true,
                active: state.bottomListActive === listIndex
              }" align="center" :text="listItem.subTitle" />

            </up-grid-item>
          </up-grid>
        </view>
      </view>


      <view class="bot-container">
        <!--        <view v-for="(item, index) in data"-->
        <!--              :key="index">-->
        <!--          <HotItem :model-value="item"></HotItem>-->
        <!--        </view>-->
        <scrollList @load-more="loadMore" :data="data">
          <template #default="{item}">
            <HotItem :model-value="item" @click="sheep.$router.go('/pages/goods/index', { id: item.id })" />
          </template>
        </scrollList>
      </view>
    </s-layout>
  </view>
</template>

<script setup>
  import {
    computed,
    ref,
    reactive,
  } from 'vue';
  import {
    onLoad,
    onPageScroll,
    onReachBottom,
    onPullDownRefresh,
  } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import $share from '@/sheep/platform/share';
  import SLayout from '@/sheep/components/s-layout/s-layout.vue';
  import UniSearchBar from '@/uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue';
  import UniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';
  import UpText from '@/uni_modules/uview-plus/components/u-text/u-text.vue';
  import fontIcon from '@/sheep/businessCom/fontIcon.vue';

  import HotItem from '@/sheep/businessCom/hot-item.vue';
  import scrollList from '@/sheep/businessCom/scrollList.vue';
  import {
    useScrollData,
  } from '@/sheep/hooks/useSrcollData';
  import SpuApi from '@/sheep/api/product/spu';


  // 隐藏原生tabBar
  uni.hideTabBar();

  const template = computed(() => sheep.$store('app').template?.home);
  // 在此处拦截改变一下首页轮播图 此处先写死后期复活 放到启动函数里
  // (async function() {
  // console.log('原代码首页定制化数据',template)
  // let {
  // 	data
  // } = await index2Api.decorate();
  // console.log('首页导航配置化过高无法兼容',JSON.parse(data[1].value))
  // 改变首页底部数据 但是没有通过数组id获取商品数据接口
  // let {
  // 	data: datas
  // } = await index2Api.spids();
  // template.value.data[9].data.goodsIds = datas.list.map(item => item.id);
  // template.value.data[0].data.list = JSON.parse(data[0].value).map(item => {
  // 	return {
  // 		src: item.picUrl,
  // 		url: item.url,
  // 		title: item.name,
  // 		type: "image"
  // 	}
  // })
  // }())

  //提取tabs
  const tabsList = computed(() => {
    return sheep.$store('category').category.find(x => x.name === 'home').children.find(x => x.name ===
      'home-top').children;
  });
  const user = computed(() => {
    return sheep.$store('user').userInfo;
  });
  const src = ref('https://cdn.uviewui.com/uview/album/1.jpg');
  const bottomList = [{
    name: 'photo',
    title: '热销榜单',
    subTitle: '大家都在卖',
  },
    {
      name: 'lock',
      title: '新品惠萃',
      subTitle: '抢鲜正当时',
    },
    {
      name: 'star',
      title: '口碑精选',
      subTitle: '品牌云集购',
    },
    {
      name: 'hourglass',
      title: '厂家直销',
      subTitle: '省钱更省心',
    },
  ];
  const hotSrcList = [
    'https://www.zhangfkj.cn/zfkj/14_8e4429b6-72d2-47a1-9c78-2cb8a17580ebpoint.gif',
    'https://www.zhangfkj.cn/zfkj/14_6e40a7d1-064a-4b68-9601-dfc1d207528ctimelimit.gif',
    'https://www.zhangfkj.cn/zfkj/14_cfde34b9-f6a6-46e1-953d-05af62b07e29returnscore.gif',
    'https://www.zhangfkj.cn/zfkj/14_2d828548-6090-4fa6-a62b-1254a646f492lottery.png',

  ];
  const state = reactive({
    tabActive: 0,
    list3: [
      'https://www.zhangfkj.cn/zfkj/14_3090e5e5-930c-4345-8388-df30ab106190brands3 (1).png',
      'https://www.zhangfkj.cn/zfkj/14_812df92b-2b94-49bf-bffb-6a6b865424cfwine.c7116238.jpg',
      'https://www.zhangfkj.cn/zfkj/14_a3d94d4d-8c70-49cc-834e-34114b301273879352813715456 (1).jpg',
      'https://www.zhangfkj.cn/zfkj/14_b741e4ab-f347-42ac-af60-48b50e8446cfbrands1 (1).png',
      'https://www.zhangfkj.cn/zfkj/14_b7dd9e0b-a26d-41ee-954e-5d8cf8950388life (1).png',
    ],
    timeData: {},
    // 底部分类
    bottomListActive: 0,
    searchParam: {
      name: '热销榜单',
    },
  });

  function botHotHandler(listItem, listIndex) {
    state.bottomListActive = listIndex;
    state.searchParam.name = listItem.title;
    initScrollData();
  }

  function to(row) {

  }

  const tabChange = (tabItem, index) => {
    state.tabActive = index;
    if (index === 0) {
      state.bottomListActive = 0;
      state.searchParam.name = bottomList[0].title;
      initScrollData();
      return;
    }
    state.searchParam.name = tabItem.title;
    initScrollData();
  };

  // 菜单栏
  const baseList = [{
    name: 'photo',
    title: '积分换购',
    path: '/pages/index/exchange',
  },
    {
      name: 'lock',
      title: '限时秒杀',
      path: '/pages/activity/seckill/list',
    },
    {
      name: 'star',
      title: '专题',
      path: '/pages/index/album',
    }, {
      name: 'star',
      title: '疯抢排行',
      path: '/pages/index/ranking',
    },
  ];


  // 定义 onChange 方法
  const onChange = (e) => {
    state.timeData = e;
  };


  const {
    data,
    loadMore,
    init,
  } = useScrollData({
    getApi: SpuApi.getPointList,
    params: state.searchParam,
  });

  function initScrollData() {
    init({
      params: state.searchParam,
    }, true);
    loadMore();
  }


  // #ifdef H5
  const navbar = 'none';
  // #endif
  // #ifdef MP
  const navbar = 'custom';
  // #endif
  onLoad((options) => {


    // #ifdef MP
    // 小程序识别二维码
    if (options.scene) {
      const sceneParams = decodeURIComponent(options.scene).split('=');
      console.log('sceneParams=>', sceneParams);
      options[sceneParams[0]] = sceneParams[1];
    }
    // #endif

    // 预览模板
    if (options.templateId) {
      sheep.$store('app').init(options.templateId);
    }

    // 解析分享信息
    if (options.spm) {
      $share.decryptSpm(options.spm);
    }

    // 进入指定页面(完整页面路径)
    if (options.page) {
      sheep.$router.go(decodeURIComponent(options.page));
    }
    loadMore();

  });

  // 下拉刷新
  onPullDownRefresh(() => {
    sheep.$store('app').init();
    setTimeout(function() {
      uni.stopPullDownRefresh();
    }, 800);
  });

  onPageScroll(() => {
  });
  onReachBottom(() => {
    console.log('到底了');
    uni.$emit('onReachBottom');
    loadMore();
  });
</script>

<style lang="scss" scoped>
  .container {
    position: relative;

    &-first-tab {
      .top {
        background-color: #da4944;

        .search {
          padding: 5rpx 10rpx;

        }

        .top-tab-box {
          position: relative;

          :deep(.top-tabs) {
            .u-tabs__wrapper__nav__item {
              flex: 1;
            }
          }
        }
      }

      .banner {
        position: relative;
        padding: 20rpx 0;


        &::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 80%;
          top: 0;
          left: 0;
          background-color: #da4944;
          border-radius: 0 0 50% 50%;
          z-index: -1;
        }

        :deep(.u-swiper) {
          //border-radius: 20%;
          margin: 0 20rpx
        }
      }

      .middle-box {
        padding: 0 20rpx;

        .gridMenu {
          margin: 10rpx 0;

          .grid-text {
            margin: 10rpx 0;
          }
        }

        .hotBox {
          margin-bottom: 10px;
          border: 1px solid #eee;
          border-radius: 20rpx;
          padding: 20rpx;

          &-top {
            align-items: center;

            .first {
              margin-right: 10rpx;
            }

            .jifenIcon {
              background: linear-gradient(90deg, #fb7845, #ffbb5b);
              color: #fff;
              padding: 0 5rpx;
              border-radius: 25rpx;
            }
          }

          &-bot {
            color: #7b7b7b;
            margin: 15rpx 0;
          }

          .imageBox {
            display: flex;
            align-items: center;
            justify-content: space-around;
          }

        }
      }


      .bottomHotBox {
        :deep(.u-text) {
          &.title {
            .u-text__value {
              font-size: 35rpx !important;
            }
          }

          &.subTitle {
            .u-text__value {
              padding: 10rpx;
              margin-top: 5rpx;
              color: #b1b1b1 !important;

            }

            &.active {
              .u-text__value {
                color: white !important;
                background-color: #da4944;
                border-radius: 30rpx;
              }
            }
          }

        }
      }

    }


    .bot-container {
      padding: 0 20rpx;
      margin-top: 30rpx;
    }

    :deep(.page-app) {

      background-color: transparent !important;
      //overflow: auto;
      //height: 1000rpx;

      .page-main {
        background: transparent !important;

        .page-body {
          position: relative;

          &::after {
            position: absolute;
            width: 100%;
            top: 0;
            left: 0;
            z-index: 100000;
            background-color: #da4944;
            height: 500px;
            border-radius: 0 0 50% 50%;
          }
        }
      }
    }
  }


  .time {
    @include flex;
    align-items: center;

    &__custom {
      margin-top: 4px;
      width: 22px;
      height: 22px;
      background-color: $u-primary;
      border-radius: 4px;
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      justify-content: center;
      align-items: center;

      &__item {
        color: #fff;
        font-size: 12px;
        text-align: center;
      }
    }

    &__doc {
      color: $u-primary;
      padding: 0px 4px;
    }

    &__item {
      color: #606266;
      font-size: 15px;
      margin-right: 4px;
    }
  }

  uni-page-body {
    background-color: #fff;
  }
</style>